<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <link href="focus-indicator.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const directLine = WebChat.createDirectLine({ token: await testHelpers.token.fetchDirectLineToken() });
        const store = testHelpers.createStore();

        WebChat.renderWebChat(
          { activityMiddleware: testHelpers.createRunHookActivityMiddleware(), directLine, store },
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
        const initialSendBoxAttachments = await pageObjects.runHook(
          ({ useSendBoxAttachments }) => useSendBoxAttachments()[0]
        );

        // THEN: It should return empty array.
        expect(Array.isArray(initialSendBoxAttachments)).toBe(true);
        expect(initialSendBoxAttachments).toHaveLength(0);

        // SETUP: An empty file blob.
        const blob = new File(
          [
            await (
              await fetch(
                'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface1.jpg'
              )
            ).blob()
          ],
          'surface1.jpg',
          { type: 'image/jpeg' }
        );

        const thumbnailBlob = await (
          await fetch(
            'https://raw.githubusercontent.com/compulim/BotFramework-MockBot/master/public/assets/surface2.jpg'
          )
        ).blob();

        const thumbnailURL = await new Promise((resolve, reject) => {
          const fileReader = new FileReader();

          fileReader.onerror = reject;
          fileReader.onload = () => resolve(new URL(fileReader.result));
          fileReader.readAsDataURL(thumbnailBlob);
        });

        // WHEN: `useSendBoxAttachments` hook is called to set an attachment.
        await pageObjects.runHook(({ useSendBoxAttachments }) => {
          const attachmentsRef = React.useRef([{ blob, thumbnailURL }]);
          useSendBoxAttachments()[1](attachmentsRef.current);
        });

        // THEN: It should show checkmark on the button and file preview.
        await host.snapshot();

        // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
        const sendBoxAttachments = await pageObjects.runHook(({ useSendBoxAttachments }) => useSendBoxAttachments()[0]);

        // THEN: It should return 1 attachment.
        expect(sendBoxAttachments).toHaveLength(1);
        expect(sendBoxAttachments[0].blob).toBe(blob);

        // WHEN: Send button is clicked.
        await host.click(pageElements.sendButton());

        // THEN: It should send the attachment (each "run hook" is an activity).
        await pageConditions.allOutgoingActivitiesSent();
        await pageConditions.numActivitiesShown(5);
        await host.snapshot();

        // WHEN: `useSendBoxAttachments` hook is called to get the attachments.
        const finalSendBoxAttachments = await pageObjects.runHook(
          ({ useSendBoxAttachments }) => useSendBoxAttachments()[0]
        );

        // THEN: It should return 0 attachments.
        expect(finalSendBoxAttachments).toHaveLength(0);
      });
    </script>
  </body>
</html>
